Multi-Select Dialog Alternatives

Description

If you want to present a user with a list of options that allows multiple selections, the following alternatives are easy to implement. Both alternatives are variations of a single design and both assume that you can subsequently use a character list of the selected options.

  1. Sketch a button onto a form.

    images/XB_List_box_check_box_1.gif
  2. Enter the button Label, select Use Action Scripting, and click Next >.

    images/XB_List_box_check_box_2.gif
  3. Select "Dialog Boxes" from the Category list and "Display an XDialog Box" from the Action list, and click OK.

    images/Action_Dialog_Boxes_Display_an_Xdialog_box.gif
  4. Select "Check Box-List Box" from the list of controls, enter a name into the Variable Name field. Optionally enter a Prompt to appear to the left of the control. Select "Character" from the Type list, and set a Width in characters. (Your choices now are not critical. You can go back and change them later.)

  5. Click Define List Box.

    images/XB_List_box_check_box_4.gif
  6. This step specifies the options that will appear in the control. You can either:

    • Enter a list of options, each on its own line

    • Have the choices computed automatically

Computed Automatically

  1. The second option can make your application easier to maintain, since the options are simply drawn from records in a table. Select "Computed Automatically". The following is a picture of a browse showing the source data this example uses.

    images/XB_List_box_check_box_13.gif
  2. In the Source list, select "Values from a table/set".

  3. In the Table or Set list, select the table that contains the option values. In this example, the current table also happens to contain the option values.

  4. In the Field list, select the field that contains the option values.

  5. Optionally, add a filter expression in the Filter field. For example, you might want to exclude blank values.

  6. Optionally, add an order expression in the Order field. Unless the data has some natural order, it is more user-friendly to alphabetize the option values.

  7. Optionally, check Advanced Formatting? You may want to experiment with the results that you can achieve by coloring alternate rows or changing fonts or point sizes.

  8. Click OK to continue.

    images/XB_List_box_check_box_5.gif
  9. Click OK to continue. The next dialog allows you to define the title of the dialog box. It also allows you to add labels or instructions at the top, bottom, left, and right sides of the dialog. This example uses "Check Box - List Box" for the title and "You may select multiple items" for the header. Again, your choices here are not critical. You can come back later and change them.

  10. Optionally, modify the comment that describes the action you are creating.

  11. Click Next >, click Finish, return to the form, and click to save your changes.

  12. Switch to form view mode by clicking . Click your new button to see what happens.

    images/XB_List_box_check_box_10.gif
  13. Now is the time to change the width of the control or its labels. Go back into design mode, right click on the button, and select Events > OnPush.

  14. Click Edit Action. You can now work your way through the genie again, changing various display attributes of the dialog. The one thing you cannot do is change its height. That comes next.

  15. By default the check box list box control only shows three lines of options. If you wanted 10 lines of options, you would do the following. Select your form, go back into design mode, right click on the button, and select Events > OnPush. Right click the action and select View Xbasic.

  16. Click Copy Code to the Clipboard, then click the icon on the toolbar. Paste the copied code into this new script and save it.

  17. Change the highlighted value to increase the number of rows of data you want the control to display (This number sets the height of control, not the number of rows its displays.) Save your script with a name that suggests what it does.

    images/XB_List_box_check_box_12.gif
  18. Select your form, right click on the button, and select Events > OnPush. Right click the action and select Comment Out. Your action should look like this.

    images/XB_List_box_check_box_14.gif
  19. Click the 'plus' button and select "Scripts" from the Category list and "Run a Script" from the Action list, and click OK.

  20. Click the 'plus' button and select "Scripts" from the Category list and "Run a Script" from the Action list, and click OK.

  21. Select the new script you created in step 23. Click Next >, Next >, and Finish. Switch the form to view mode and try the button again.

    images/XB_List_box_check_box_11.gif
  22. This variation follows the same procedure, but displays a Multi-Select List Box instead of a Check Box - List Box.

  23. To modify the height of the resulting list box, edit the number highlighted below.

    images/Multi_select_list_box_2.gif
  24. Your result should look something like this.

    images/Multi_select_list_box_3.gif
  25. The user's selections are returned as a CR-LF delimited list in the variable that you created in step 5. In the case of the check box - list box, this variable was named check boxes. In the case of the multi-select list box, the variable was named multiselect.